<template>
  <div class="bill">
  <header-bar :text="title" :left="left" ></header-bar>
    <div class="zican">
        <p>{{userinfo.value}}</p>
        <p>已锁定{{userinfo.lockValue}}</p>
    </div>
    <p style="font-size: 12px;padding: 5px;">账单记录</p>
    <div class="billallList"
        v-if="list.length > 0"
        v-infinite-scroll="loadMore"
        >
            <div class="bill-list" v-for="(item, key) in list" :key="key" v-if="item.status == 1">
                <div class="bill-head">
                    <div class="bill-type">
                        <div v-if="item.type==2" class="chong chongicon">充</div>
                        <div v-else class="ti tiicon">提</div>
                        <!-- <img v-if="item.type==2" src="../assets/zdc.png"   alt="">
                        <img v-else src="../assets/zdt.png" alt=""> -->
                    </div>
                    <div class="bill-head-r">
                        <div class="bill-head-r-p">
                            <div>{{item.coinType}}</div>
                            <div>
                                <!-- <span style="color:#EC5757">+11</span> -->
                                <span style="color:#353535">{{item.type == 1 ? '-' : '+'}}{{item.amount}}</span>
                            </div>
                        </div>
                        <div class="bill-head-r-p">
                            <span style="color:#888">{{item.payTime}}</span>
                            <span>
                                <!-- <div class="bill-status" style="color:#C0975D;" v-if="item.payStatus==1">审核中</div> -->
                                <div class="bill-status" style="color:#888888;" >{{item.type == 1 ? '提币' : '充币'}}成功</div>
                            </span>
                        </div>
                    </div> 
                </div>
            </div>
    </div>
    <div class="noData" v-else>暂无数据</div>
    <div class="zicantool">
        <div class="themebtn1" @click="chong">提币</div>
        <div class="themebtn" @click="ti">充币</div>
    </div>
  </div>
</template>
<script>
import {
  Header,
  CellSwipe,
  InfiniteScroll,
  Toast,
  Indicator,
  MessageBox
} from "mint-ui";
import moment from "moment";
import { transactList } from "../api/api.js";
import headerBar from "./main/header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "Bill",
    data() {
        return {
            msg: "",
            list: [
                // {
                //   status: 1,
                //   type: 2,
                //   payAmount: 123
                // },{
                //   status: 1,
                //   type: 1,
                //   payAmount: 123
                // }
            ],
            pageNum: 1,
            pageSize: 5,
            title: "我的资产（BTC）",
            left: {
                status: true
            },
            userinfo:{}
        };
    },
    computed: {
        ...mapState(["pageInfo"])
    },
    components: {
        headerBar
    },
    methods: {
        chong(){
            MessageBox({
                title: '',
                message: '暂无关联地址',
                confirmButtonText:"去关联",
                showCancelButton: true
            }).then((res) => {
                if(res == "cancel"){
                    this.$router.back();
                }else{

                }
            });
            // this.$router.push({ path: "/recharge"});
        },
        ti(){
            // MessageBox({
            //     title: '',
            //     message: '暂无关联地址',
            //     confirmButtonText:"去关联",
            //     showCancelButton: true
            // }).then((res) => {
            //     if(res == "cancel"){
            //         this.$router.back();
            //     }else{
                    
            //     }
            // });
            this.$router.push({ path: "/extract",query:{
                code:"BTC",
                value:1
            }});
        },
        getTransactList() {
            let para = {
                id: this.pageInfo.userinfo.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            this.$ajaxGet("billFlow", para).then(res => {
                Indicator.close();
                if (res.code !== 200) {
                Toast({
                    message: res.msg,
                    position: "bottom",
                    duration: 5000
                });
                } else {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].payTime = moment(
                    new Date(res.data[i].createTime)
                    ).format("MM-DD HH:mm");
                }
                if (this.list == "") {
                    this.list = res.data;
                } else {
                    this.list = this.list.concat(res.data);
                }
                }
            });
        },
        loadMore() {
            this.pageNum = this.pageNum + 1;
            this.getTransactList();
        }
  },
  mounted() {
    this.getTransactList();
  },
  created(){
        this.pageInfo.userinfo.coinData.forEach((item,index) => {
			  if(item.coinType == "BTC"){
                  this.userinfo = item;
			  }
		})
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/bill.css");
</style>
